<script setup lang="ts">
import {Shard, State} from "@/views/types/shards.ts";
import {ref} from "vue";

const props = defineProps<{shard: Shard,detail:boolean}>();
const tab = ref<string>("p")
const currentPrimaryKey =ref<number>(-1);
const currentReplicaKey =ref<number>(-1);
const selectPrimary = (index:number) =>{
  tab.value="p";
  currentPrimaryKey.value=index;
}

const selectReplica = (index:number) =>{
  tab.value="r";
  currentReplicaKey.value=index;
}
const color = (state:State)=>{
  if(state===State.STARTED){
    return "#6BFF84";
  }else if(state===State.RELOCATING){
    return "#E9A952"
  }else if(state===State.INITIALIZING){
    return "#E9A952"
  }else if(state===State.UNASSIGNED){
    return "red"
  }
  return  "red";
}
</script>

<template>
  <div>
    <el-descriptions v-if="!detail" :column="2" style="overflow: hidden">
      <el-descriptions-item label="数量">{{props.shard.docs}}</el-descriptions-item>
    </el-descriptions>
    <div style="overflow: auto">
      <div style="display: flex;justify-content: flex-start;align-items: center">
        <template v-for="item in props.shard.types.filter(d=>d.prirep==='p')">
          <div :style="{cursor:props.detail?'pointer':'',borderColor:color(item.state),borderStyle:item.prirep==='p'?'solid':'dashed',backgroundColor:props.detail?(tab==='p' && item.shard===currentPrimaryKey?'var(--el-color-primary-light-9)':''):''}" class="shard-item" @click="selectPrimary(item.shard)">
            <div style="width: 25px" :title="item.unassignedReason">{{ item.prirep + item.shard }}</div>
          </div>
        </template>
      </div>
      <div style="display: flex;justify-content: flex-start;align-items: center">
        <template v-for="item in props.shard.types.filter(d=>d.prirep==='r')">
          <div  :style="{cursor:props.detail?'pointer':'',borderColor:color(item.state),borderStyle:item.prirep==='p'?'solid':'dashed',backgroundColor:props.detail?(tab==='r' && item.shard===currentReplicaKey?'var(--el-color-primary-light-9)':''):''}" class="shard-item" @click="selectReplica(item.shard)">
            <div style="width: 25px" :title="item.unassignedReason">{{ item.prirep + item.shard }}</div>
          </div>
        </template>
      </div>
    </div>
    <div v-if="detail">
      <el-tabs v-model="tab">
        <el-tab-pane label="主分片" name="p">
          <el-table row-key="shard" :current-row-key="currentPrimaryKey" highlight-current-row border stripe :height="350" :data="props.shard.types.filter(d=>d.prirep==='p')">
            <el-table-column prop="node" label="节点" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="ip" label="IP" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="docs" label="数量" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="shard" label="分片" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="store" label="存储" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="state" label="状态" align="center" show-overflow-tooltip>
              <template #default="scope">
                <el-tag v-if="scope.row.state==='UNASSIGNED'" type="danger">未分配</el-tag>
                <el-tag v-if="scope.row.state==='INITIALIZING'" type="primary">初始化</el-tag>
                <el-tag v-if="scope.row.state==='RELOCATING'" type="warning">迁移中</el-tag>
                <el-tag v-if="scope.row.state==='STARTED'"  type="success">已启动</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="副本分片" v-if="props.shard.types.filter(d=>d.prirep==='r').length>0" name="r">
          <el-table row-key="shard" highlight-current-row :current-row-key="currentReplicaKey" border stripe :height="350" :data="props.shard.types.filter(d=>d.prirep==='r')">
            <el-table-column prop="node" label="节点" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="ip" label="IP" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="docs" label="数量" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="shard" label="分片" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="store" label="存储" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="state" label="状态" align="center" show-overflow-tooltip>
              <template #default="scope">
                <el-tag v-if="scope.row.state==='UNASSIGNED'" type="danger">未分配</el-tag>
                <el-tag v-if="scope.row.state==='INITIALIZING'" type="primary">初始化</el-tag>
                <el-tag v-if="scope.row.state==='RELOCATING'" type="warning">迁移中</el-tag>
                <el-tag v-if="scope.row.state==='STARTED'"  type="success">已启动</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped>
.shard-item{
  padding:5px;
  margin:5px;
  border-width:3px;
}
</style>